<template>
  <view class="emergency-page">
    <!-- 价格筛选区块 -->
    <view class="price-filter">
      <view class="filter-title">价格筛选</view>

      <view class="">
        <view class="slider-range">
          <llt-slider-range
            @onBlockTouchEnd="onBlockTouchEnd"
            :min="sliderRange.min"
            :max="sliderRange.max"
            v-model="sliderRange.rangeValueS"
          />
        </view>
      </view>
    </view>
    <!-- 医院列表区块 -->
    <view class="hospital-list">
      <view class="hospital-title">医院</view>
      <view
        class="hospital-item"
        v-for="(item, idx) in list"
        :key="idx"
        @click="btyn(item, idx)"
      >
        <image class="hospital-img" :src="item.img" />
        <view class="hospital-name">{{ item.name }}</view>
        <view class="hospital-price">¥{{ item.price }}元</view>

        <view class="">
          <image
            style="width: 40rpx; height: 40rpx; border-radius: 50%"
            :src="
              item.sel == true
                ? '/static/activity/icon_yuan_dui.png'
                : '/static/activity/icon_yuan.png'
            "
            mode=""
          ></image>
        </view>
      </view>
    </view>
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="bottom-info"
        >预估：¥{{ sliderRange.rangeValueS[0] }}-{{
          sliderRange.rangeValueS[1]
        }}
        元起
        <text v-if="changeList.length != 0">
          已选{{ changeList.length }}个医院
        </text>
      </view>
      <view class="call-btn" @click="submit">呼叫</view>
    </view>
  </view>
</template>

<script>
import xzSliderRange from "@/components/xz-slider-range/xz-slider-range.vue";
import commonMixin from "@/mixin/commonMinxin";
export default {
  mixins: [commonMixin],
  components: {
    xzSliderRange,
  },
  data() {
    return {
      sliderRange: {
        min: 20,
        max: 2000,
        rangeValueS: [20, 2000],
      },
      latitude: "",
      longitude: "",
      rangeMin: 5,
      rangMax: 2000,
      changeList: [],
      list: [],
      rangeValueS: [30, 50],
      rangeValue: [0, 200],
      userId: "",
    };
  },
  onLoad(options) {
    this.$nextTick(() => {
      uni.getLocation({
        type: "wgs84",
        success: (res) => {
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          this.userId = options.userId;
          console.log(res);
          this.init();
        },
      });
    });
  },
  methods: {
    submit() {
      if (this.changeList.length == 0) {
        uni.showToast({
          title: "请选择医院",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      let lastList = [];
      lastList = this.changeList.map((res) => {
        if (res.sel == true) {
          return res.id;
        }
      });
      let max = Math.max(...this.changeList.map((item) => item.price));

      let ddd = {
        clinicList: lastList,
        estimatedCost: max,
        userLatitude: this.latitude,
        userLongitude: this.longitude,
      };
      let dataString = JSON.stringify(ddd);

      uni.navigateTo({
        url:
          "/pages/emergency/confirmOrder?estimatedCost=" +
          encodeURIComponent(dataString),
      });
    },
    btyn(item) {
      this.changeList = [];
      item.sel = !item.sel;
      this.list.map((res) => {
        if (res.sel == true) {
          this.changeList.push(res);
        }
      });
    },
    init() {
      this.list = [];
      let editData = {
        offset: 1,
        limit: 10,
        isOnline: 1,
        latitude: this.latitude,
        location: "浦东爱心宠物医院",
        longitude: this.longitude,
        maxAmount: this.sliderRange.rangeValueS[1],
        minAmount: this.sliderRange.rangeValueS[0],
        userId: this.userId,
      };
      uni.app.post("/pet/clinic/getClinics", editData, "json", "", (res) => {
        if (res.code == 2000) {
          this.list = res.data;
          this.list.map((reas) => {
            reas.sel = true;
          });

          this.changeList = this.list;
        }
      });
    },

    onBlockTouchEnd(e) {
      this.sliderRange.rangeValueS = e;
      this.init();
    },
  },
};
</script>

<style scoped lang="scss">
.active {
  background: red;
}

.emergency-page {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
  width: 92%;
  margin: 0 auto;
}

.price-filter {
  background: #fff;
  padding: 16px 12px 8px 12px;

  margin-top: 30rpx;
  padding: 30rpx;
}

.filter-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.filter-bar {
  display: flex;
  align-items: center;
}

.price-input {
  width: 48px;
  height: 28px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #333;
  background: #fafafa;
}

.price-input.left {
  margin-right: 8px;
}

.price-input.right {
  margin-left: 8px;
}

.slider-bar {
  flex: 1;
  height: 4px;
  background: #f5f5f5;
  border-radius: 2px;
  position: relative;
  margin: 0 8px;
}

.slider-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #ff4d4f;
  border-radius: 2px;
}

.slider-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #ff4d4f;
  border-radius: 50%;
  transform: translateY(-50%);
}

.reset-btn {
  margin-left: 12px;
  color: #bbb;
  font-size: 13px;
}

.hospital-list {
  padding: 12px;
  margin-top: 40rpx;
  background: #fff;
  // border-bottom: 1px dashed #ccc;
}

.hospital-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.hospital-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.hospital-img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.hospital-name {
  flex: 1;
  font-size: 15px;
  color: #333;
}

.hospital-price {
  font-size: 14px;
  color: #888;
  margin-right: 10px;
}

.checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #fff;
}

.checkbox.checked {
  border-color: #ff4d4f;
  background: #ff4d4f;
  color: #fff;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 56px;
  z-index: 10;
}

.bottom-info {
  font-size: 14px;
  color: #888;
}

.call-btn {
  background: #ff4d4f;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  padding: 8px 32px;
  margin-left: 12px;
  font-weight: bold;
}
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}
</style>
